import './index.scss'
import VideoPlayer from '@/components/VideoPlayer'
import { Link, useParams } from 'react-router-dom'
import WatchAnimeSkeleton from '../../components/WatchAnimeSkeleton'
import { useEffect } from 'react'
import { useGetXinFanList } from '@/utils/hooks'
import { IconContext } from 'react-icons'
import { HiOutlineSwitchHorizontal } from 'react-icons/hi'

const AnimeDetail = () => {
  const id = useParams().id
  const ep = useParams().ep
  // const openMessage = useOpenMessageThrottle(1000)

  const {
    xinfan,
    internalPlayer,
    setInternalPlayer,
    updateXinFanList,
    loading,
  } = useGetXinFanList();

  useEffect(() => {
    updateXinFanList(id, ep)
  }, [ep])

  const { data: xinfanData } = xinfan;
  console.log(xinfan);
  const totalEpisodes = parseInt(xinfanData?.total) || 0
  return (
    <>
      {loading && <WatchAnimeSkeleton />}
      {!loading && (
        <div className="anime-wrapper">
          {xinfanData?.url && (
            <div className="video-player-wrapper">
              <div>
                {!internalPlayer && (
                  <VideoPlayer
                    source={xinfanData.url}
                    internalPlayer={internalPlayer}
                    setInternalPlayer={setInternalPlayer}
                    banner={xinfanData.poster}
                    title={xinfanData.fanName}
                    totalEpisodes={xinfanData.total}
                    currentEpisode={xinfanData.unitIndex}
                    type="mp4"
                  />
                )}
                {internalPlayer && (
                  <>
                    <div className="video-header">
                      <IconContext.Provider
                        value={{
                          size: '0.8rem',
                          style: { verticalAlign: 'middle' },
                        }}
                      >
                        <span>
                          外部播放器 {'('}
                          {xinfanData.fanName}
                          {')'}
                        </span>
                        {xinfanData.type === 1 && (
                          <div className="tooltip">
                            <button
                              title="切换内部播放器"
                              onClick={() => {
                                setInternalPlayer(!internalPlayer)
                              }}
                            >
                              <HiOutlineSwitchHorizontal />
                            </button>
                          </div>
                        )}
                      </IconContext.Provider>
                    </div>
                    <div className="iframe-player">
                      <iframe
                        id="video"
                        title={xinfanData.fanName}
                        src={xinfanData.url}
                        allowFullScreen={true}
                        frameBorder="0"
                        marginWidth="0"
                        marginHeight="0"
                        scrolling="no"
                      ></iframe>
                    </div>
                  </>
                )}
              </div>

              <div className="episodes-wrapper">
                <div className="episodes-title">
                  <h4>选集播放</h4>
                  <span>
                    {'('}
                    {ep}/{totalEpisodes}
                    {')'}
                  </span>
                </div>
                <div className="episodes">
                  {[...Array(parseInt(totalEpisodes))].map((_, index) => (
                    <Link
                      to={`/anime/play/${id}/${index + 1}`}
                      draggable="false"
                      key={index}
                      className="episode-link"
                      style={{
                        backgroundColor: parseInt(ep) === index + 1 ? '#00AEEC' : '',
                        color: parseInt(ep) === index + 1 ? '#fff' : '#222',
                      }}
                    >
                      {index + 1}
                    </Link>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      )}
    </>
  )
}

export default AnimeDetail
